<template>
	<view class="edit-box">
		<view class="item-content">
			<view class="img-box" @click="chooseImg">
				<image class="img-show-item" v-if="showImg" :src="showImg" mode=""></image>
				<view class="text-img-box" v-else>
					<u-icon name="photo-fill" color="#666" size="45"></u-icon>
					<text class="img-text">点击此处上传图片</text>
				</view>
			</view>
			<view class="list-box" :style="showImg?'margin-top: 60rpx;':'margin-top: 100rpx;'">
				<view class="item-box">
					<text class="item-title">{{addType== 1?'企业产品名称':addType== 4?'企业环境名称':''}}</text>
					<input v-model="addData.productName" type="text" class="text-inp" placeholder-class="place-class"
						value="" maxlength="30" placeholder="请输入名称30字以内" />
				</view>
				<view class="item-box" style="margin-bottom: 80rpx;position: relative;">
					<text class="item-title">描述</text>
					<textarea :auto-height="true" v-model="addData.remarks" value="" maxlength="100" class="text-area"
						placeholder-class="place-class" placeholder="请输入描述" />
					<view class="text-box">
						<text class="curcount" style="color: #0080FF;">{{addData.remarks.length+'/'}}</text>
						<text class="allcount">100</text>
					</view>
				</view>
			</view>
			<button :disabled="btnDisable" class="blue-btn" @click="saveItem" style="margin: 0 auto;">保存</button>
		</view>
	</view>
</template>
<script>
	import {
		getToken
	} from '@/utils/token.js'
	import {
		addPro
	} from '@/common/api/auth.js'
	import {
		uploadFilePromise
	} from "@/utils/upload.js"
	export default {
		data() {
			return {
				addType: '', //添加类型，1为产品 4为环境
				addData: {
					companyId: '', //	是	string	公司编号
					productName: '', //是	string	名称
					stationType: '', //是	string	类型
					remarks: '', //是	string	描述
					moduleNo: 'ydylapp1001', //是	string	模块编号
					imgName: '' //是	string	图片名
				},
				loadUrl: '', //上传图片的路径
				showImg: '', //显示图片
				btnDisable: false
			}
		},
		onLoad: function(option) {
			this.addType = Number(option.type)
			//获取用户信息
			this.addData.companyId = getToken('useNum')
			this.addData.stationType = this.addType
			if (this.addType == 1) {
				this.loadUrl = this.mainProducts
			} else if (this.addType == 4) {
				this.loadUrl = this.enterprisePic
			}
		},
		methods: {
			 chooseImg() {
				uni.chooseImage({
					count: 1,
					success: async (e) => {
						//截图工具点击确定之后上传图片
						//如果不为空的话上传之后裁剪又会跳出来
						this.tempFilePath = ''
						let params = {
							params: {}
						}
						params['params']['fileType'] = 100
						params['params']['fileCode'] =this.addType == 1 ?134 : 137
						params['url'] = e.tempFilePaths[0]
						const dataImg = await uploadFilePromise(params)
						if (dataImg) {
							this.showImg = this.addType == 1 ?
								'https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/mainProductsImage/' +
								dataImg :
								'https://www.ydylmold.cn/images/ydylapp/usrCompanyStation/enterprisePicImage/' +
								dataImg
							this.addData.imgName = dataImg //提交给数据库
						}
					}
				})
			},
			//点击保存
			saveItem() {
				let data = this.addData
				if (!data.imgName) {
					uni.showToast({
						title: '请上传产品图片',
						icon: 'none'
					})
				} else if (!data.productName) {
					uni.showToast({
						title: '请填写名称',
						icon: 'none'
					})
				} else if (!data.remarks) {
					uni.showToast({
						title: '请填写产品描述',
						icon: 'none'
					})
				} else {
					uni.showLoading({
						title: '提交中'
					})
					if (!this.btnDisable) {
						addPro(this.addData).then(res => {
							uni.hideLoading()
							this.btnDisable = true
							uni.showToast({
								title: res.data && res.data.msg,
								icon: 'none'
							})
							if (res.data && res.data.code == 1) {
								this.$store.commit('isFresh', true)
								setTimeout(() => {
									this.toback()
								}, 700)
							} else {
								this.btnDisable = false
							}
						}).catch(err => {
							this.btnDisable = false
						})
					}
				}
			},
			toback() {
				uni.navigateBack({})
			}
		},
	}
</script>
<style scoped>
	.blue-btn {
		width: 630rpx;
		height: 80rpx;
		border-radius: 50rpx;
		margin: 60rpx 30rpx;
		font-size: 32rpx;
		font-weight: 500;
		background-color: #0080FF;
		color: #FFFFFF;
	}

	.img-show-item {
		width: 100%;
		height: 100%;
	}

	.edit-box {
		/* height: 110vh; */
		background-color: #FFFFFF;
	}

	.item-content {
		padding-top: 80rpx;
	}

	.img-box {
		width: 400rpx;
		height: 400rpx;
		border-radius: 10rpx;
		margin: 0 auto;
		border: 2rpx solid #F8F8F8;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
	}

	.text-img-box {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.item-title {
		font-size: 34rpx;
		font-weight: 500;
		color: #242424;
		display: block;
		margin-bottom: 20rpx;
	}

	.item-box {
		padding: 30rpx 24rpx;
		border-bottom: 1rpx solid #F8F8F8;
	}

	.item-box .item-title::after {
		content: '*';
		color: #FF3434;
	}

	.place-class,
	.text-inp,
	.text-area {
		font-size: 36rpx;
	}

	.text-area {
		width: 80%;
	}

	.text-box {
		font-size: 28rxp;
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
	}
</style>
